<template>
  <div class="virtual-list-example-root">
    <el-button type="primary" @click="handleChangeParams">测试请求</el-button>
    <div class="list-container">
      <nf-virtual-list
        ref="refVirtualList"
        :card="{ width: 100, height: 120 }"
        :request="fetchData"
        :search-params="searchParams"
        :response-filter="(value) => ({ list: value, total: 1 })"
      >
        <template #default="{ data }">
          <el-card style="width: 100px; height: 100px; margin-bottom: 20px">
            {{ data.name }}
          </el-card>
        </template>
      </nf-virtual-list>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { NfVirtualListInstance } from "@wenqian/nf-ui";

const list = new Array(1000)
  .fill("")
  .map((item, index) => ({ name: `张三${index}` }));
const searchParams = ref({
  id: 123,
  page: 0,
});
const refVirtualList = ref<NfVirtualListInstance>();

const fetchData = (t: any) => {
  console.log(t);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(list);
    }, 3000);
  });
};

const handleChangeParams = () => {
  searchParams.value.page = 10;
  refVirtualList.value?.handleSearch();
};
</script>

<style lang="scss" scoped>
.virtual-list-example-root {
  height: 300px;

  .list-container {
    height: calc(100% - 40px);
  }
}
</style>
